<template>
  <div class="recordContainer" :style="{height:scoreContainerHeight}">
    <div class="headerBox">
      <h5>员工月度评分历史记录</h5>
    </div>

    <div class="tableContainer" :style="{height:tableContainerHeight}">
      <el-table
          :data="scoreRecord"
          :height="tableHeight"
          highlight-current-row
          border
          size="small"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column
            prop="sid"
            label="ID"
            sortable
            min-width="80">
        </el-table-column>
        <el-table-column
            prop="ename"
            label="员工姓名"
            sortable
            min-width="180">
        </el-table-column>
        <el-table-column
            prop="esex"
            label="性别"
            sortable
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="sgrade"
            label="月度得分"
            sortable
            min-width="180">
        </el-table-column>
        <el-table-column
            prop="sDate"
            label="评分日期"
            sortable
            min-width="180">
        </el-table-column>
      </el-table>

      <!--  分页  -->
      <template>
        <div class="pageContainer">
          <i class="el-icon-search page-icon search-icon" @click="showSearchDialog"></i>
          <i class="el-icon-refresh page-icon refresh-icon"></i>
          <el-pagination
              class="page-container"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @prev-click="prePage"
              @next-click="nextPage"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Number(total2)">
          </el-pagination>
        </div>
      </template>
    </div>
    <recordDialog></recordDialog>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'
import recordDialog from '@/pages/Performance/recordDialog'

export default {
  name: "ScoreRecord",
  data() {
    return {
      currentPage: 1,
      page: 1,
      limit: 10,
    }
  },
  components: {
    recordDialog
  },
  computed: {
    ...mapState('score', ['scoreRecord', 'total2']),
    tableHeight() {
      if (this.scoreRecord.length > 15) {
        return 15 * 43 + 32
      }else if (this.scoreRecord.length < 10) {
        return 10 * 43 + 25
      }
      return this.scoreRecord.length * 43 + 32
    },
    tableContainerHeight() {
      if (this.scoreRecord.length > 15) {
        return 15 * 43 + 78 + 'px'
      }else if (this.scoreRecord.length < 10) {
        return 10 * 43 + 70 + 'px'
      }
      return this.scoreRecord.length * 43 + 78 + 'px'
    },
    scoreContainerHeight() {
      if (this.scoreRecord.length > 15) {
        return 15 * 43 + 198 + 'px'
      }else if (this.scoreRecord.length < 10) {
        return 10 * 43 + 160 + 'px'
      }
      return this.scoreRecord.length * 43 + 198 + 'px'
    }
  },
  methods: {
    ...mapActions('score', ['getScoreRecords']),
    ...mapMutations('score', ['showSearchDialog', 'showScoreDialog']),
    //每页显示多少条
    handleSizeChange(val) {
      let limit = this.limit = val
      let page = this.page
      this.getScoreRecords({page, limit})
    },
    //当前页是第几页
    handleCurrentChange(val) {
      let page = this.page = val
      let limit = this.limit
      this.getScoreRecords({page, limit})
    },
    //点击上一页、下一页
    prePage() {
      let page = this.page
      let limit = this.limit
      page--
      this.getScoreRecords({page, limit})
    },
    nextPage() {
      let page = this.page
      let limit = this.limit
      page++
      this.getScoreRecords({page, limit})
    }
  }
}
</script>

<style scoped>
.recordContainer {
  width: 95%;
  margin: 15px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.headerBox {
  width: 100%;
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #cfd1d2;
  background-color: #fff;
}

.tableContainer {
  width: 96%;
  margin: 15px auto;
  border: 1px solid #cfd1d2;
}

.page-container {
  text-align: center;
}

.pageContainer {
  position: relative;
}

.page-icon {
  position: absolute;
  top: 8px;
  font-size: 20px;
  color: #606266;
}

.search-icon {
  left: 0;
}

.refresh-icon {
  right: 0;
}
</style>